<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台登录-X-admin2.0</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" href="css/login_reg.css">
    <script src="../js/jquery-1.11.0.min.js"></script>
    <style>
        .errorMsg {
            margin: 0 auto;
            padding: 6px 10px;
            border: 1px solid transparent;
            text-align: left;
            color: #579c55;
            background-color: #d1ebcc;
            border-color: #d1ebcc;
            margin-bottom: 17px;
            font-size: 12px;
        }
    </style>
    <script>
        function checkUsername(){
            var username = $("#username").val();
            var reg_username = /^\w{4,17}$/;
            var flag = reg_username.test(username);
            if (flag){
                $("#username").css("border","");
                $("#msg1").html("");
            }else {
                $("#msg1").html("用户名格式不对，长度至少4位但不超过17位");
            }
            return flag;
        }
        function checkPwd(){
            var password = $("#userpassword").val();
            var reg_pwd = /^\w{4,17}$/;
            var flag = reg_pwd.test(password);
            if (flag){
                $("#userpassword").css("border","");
                $("#msg2").html("");
            }else {
                $("#msg2").html("密码名格式不对，长度至少4位但不超过17位");
            }
            return flag;
        }
        function checkEmail(){
            var email = $("#email").val();
            var reg_email = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            var flag = reg_email.test(email);
            if (flag){
                $("#email").css("border","");
                $("#msg3").html("");
            }else {
                $("#msg3").html("邮箱格式不对");
            }
            return flag;
        }
        function checkTelephone(){
            var telephone = $("#telephone").val();
            var reg_telephone = /^1(3|4|5|6|7|8|9)\d{9}$/;
            var flag = reg_telephone.test(telephone);
            if (flag){
                $("#telephone").css("border","");
                $("#msg5").html("");
            }else {
                $("#msg5").html("电话号码格式不对");
            }
            return flag;
        }
        function checkSex(){
            var sex = $("#sex").val();
            var reg_sex = "none";
            var flag = reg_sex==sex;
            if (!flag){
                $("#sex").css("border","");
            }else {
                alert("您还未选择性别！");
            }
            return !flag;
        }

        //页面加载函数
        $(function () {

                //1.当表单提交时，调用所有校验方法
                $("#registerForm").submit(function () {
                    if (checkUsername() && checkPwd() && checkEmail() && checkTelephone() && checkSex()){
//发送数据到服务器 - 确定请求方式
                    $.post("/music/user/register",
                        $(this).serialize(),//用户提交的参数
                        function (data) {
                            if (data.flag) {
                                location.href = "register_ok.html";
                            } else {
                                $("#errorMsg").html(data.errorMsg);
                            }
                        });
                    }
                    return false;
                });
        });
    </script>
</head>
<body class="login-bg">

<div class="login">
    <div class="message">用户注册
    </div>
    <div id="darkbannerwrap"></div>
    <form id="registerForm" class="layui-form" action="" method="post">
        <input id="username" name="username" placeholder="请输入用户名" type="text">
        <hr class="hr15">
        <span id="msg1" style="color: red;"></span>
        <input id="userpassword" name="userpassword" placeholder="请输入密码" type="password">
        <hr class="hr15">
        <span id="msg2" style="color: red;"></span>
        <input id="email" name="email" placeholder="请输入邮箱" type="text">
        <hr class="hr15">
        <span id="msg3" style="color: red;"></span>
        <select id="sex" name="sex">
            <option value="none">请选择性别</option>
            <option value ="男">男</option>
            <option value ="女">女</option>
        </select>
        <hr class="hr15">
        <span id="msg4" style="color: red;"></span>
        <input id="telephone" name="telephone" placeholder="请输入电话" type="text">
        <hr class="hr15">
        <span id="msg5" style="color: red;"></span>
        <div id="errorMsg" class="errorMsg" ></div>
        <input value="注册" style="width:100%;" type="submit">
        <hr class="hr20">
    </form>
</div>

</body>
</html>